<template>
  <el-form ref="loginFormRef"
           :model="loginForm"
           :rules="rules"
           label-position="left"
           label-width="auto"
           size="large"
  >
    <!--  用户名  -->
    <el-form-item :label="$t('common.login.phoneNumber')" class="form-item" prop="user">
      <el-input v-model="loginForm.mobile" :disabled="showPwd" :placeholder="$t('common.login.userNamePlaceholder')"
                @blur="clearUserName"
                @change="tapInUserName">
        <template v-if="showPwd" #append>
          <el-button @click="clearTemplate">{{ $t("common.login.changePhone") }}</el-button>
        </template>
      </el-input>
    </el-form-item>
    <!--  密码  -->
    <el-form-item v-if="showPwd" :label="$t('common.login.pwd')" prop="pwd">
      <el-input v-model="loginForm.password" :placeholder="$t('common.login.pwdPlaceholder')" show-password
                @change="frozenUserName" />
    </el-form-item>
    <el-form-item v-if="showPwd">
      <!--       TODO 重置密码-->
      <el-button
        link
        type="success"
      >{{ $t("common.login.forget") }}
      </el-button>
    </el-form-item>
    <el-form-item v-if="showPwd">
      <el-button class="login-btn button" type="primary" @click="onSubmit">{{ $t("common.login.login") }}
      </el-button>
    </el-form-item>
    <el-form-item>
      还没有账号？去
      <el-button
        link
        type="success"
        @click="()=>{router.push('/register')}"
      >{{ $t("common.login.signUp") }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import router from "@/router";
import useUserStore from "@/store/modules/user";
import { validatePhoneNum } from "@/utils/validation";
import { reactive, ref } from "vue";

let showPwd = ref(false);
let froUserName = ref(false);
const loginFormRef = ref();
const user = useUserStore();

const loginForm = reactive({
  mobile: "13685208896",
  password: "zbc"
});


const validatePhoneNumValue = (value: any) => {
  const phoneRegex = /^1[3456789]\d{9}$/;
  return phoneRegex.test(value);
};


const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (loginForm.password !== "") {
      if (!loginFormRef.value) return;
      loginFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};

const rules = reactive({
  mobile: [{ validator: validatePhoneNum, trigger: "blur" }],
  password: [{ validator: validatePass, trigger: "blur" }]
});


const tapInUserName = () => {
  showPwd.value = true;
};

const clearUserName = () => {
  validatePhoneNumValue(loginForm.mobile) ? showPwd.value = true : showPwd.value = false;
};

const frozenUserName = () => {
  froUserName.value = true;
};

const clearTemplate = () => {
  loginForm.mobile = "";
  loginForm.password = "";
  clearUserName();
};

const onSubmit = () => {
  user.login(loginForm).then(() => {
    router.push("/home");
  });


};
</script>

<style>
.form-item .el-input {
    height: 40px; /* 设置输入框高度为50px */
}

.form-item .el-form-item__label {
    line-height: 40px; /* 设置 label 的行高为50px */
}
</style>
